<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/style.css"/>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <script src="/static/js/logic.js"></script>
    <title>王者荣耀英雄皮肤</title>
</head>
<body class="flex w-[100vw] h-[100vh]">
    <!-- 左侧 - 搜索区域、预览图区域 -->
    <div class="s-left-aside w-[300px] bg-[#eee] [--serach-box-bottom-border-width:3px]">
        <!-- 搜索区域 -->
        <form action="#" class="s-form-wrapper flex flex-col items-center">
            <div class="w-[80%] my-[60px] relative">
                <input type="text" class="s-search-box w-full box-border text-[20px] p-[4px_10px] outline-none bg-linear-to-r from-[#f00] to-[#f00] bg-no-repeat bg-bottom-left bg-size-[0%_var(--serach-box-bottom-border-width)] bg-origin-border transition-[background-size] duration-500 focus:text-[#00f] focus:bg-size-[100%_var(--serach-box-bottom-border-width)] placeholder:text-[#666]" placeholder="输入英雄名称"/>
                <!-- 搜索框底部线条 -->
                <div class="s-bot-line absolute w-full h-(--serach-box-bottom-border-width) bg-[#666] left-0 bottom-0 opacity-100"></div>
            </div>
        </form>
        <!-- 预览图区域 -->
        <div class="s-preview-wrapper px-[20px] flex flex-col">
            <h3 class="s-title font-bold text-[20px] mb-[20px]">图片预览</h3>
            <div class="s-empty-preview flex-1 flex items-center justify-center text-[30px] text-[#999]">暂无内容</div>
            <ul class="s-full-preview flex-1 flex flex-col gap-[20px] overflow-auto pb-[20px]"></ul>
        </div>
    </div>
    <!-- 右侧 - 图片展示、下载区域 -->
    <div class="s-right-aside flex-1 bg-linear-to-br from-[#73c8a9] to-[#373b44] relative">
        <!-- 图片展示区域 -->
        <div class="s-show-area h-full bg-no-repeat bg-contain bg-center"></div>
        <!-- 下载区域 -->
        <div class="s-btns absolute h-[80px] top-0 left-0 w-full bg-[rgba(0,0,0,0.3)] text-[#fff] flex items-center justify-between transition-[translate] duration-600 translate-y-[-100%]">
            <h3 class="text-[26px] ml-[40px]">
                <span class="s-hero-name"></span>
                <span>-</span>
                <span class="s-skin-name"></span>
            </h3>
            <button class="s-download mr-[100px] text-[20px] p-[10px_20px] text-[#fff] font-bold cursor-pointer select-none rounded-[20px] shadow-[0_0_10px_#fff] bg-linear-to-br from-[#7b4397] to-[#dc2430]">下载</button>
        </div>
    </div>
</body>
</html>